<extend name="Public:base" />
<block name="title"><title>心e购-产品区</title></block>
<block name="resources">
<style>
	.mui-bar {
		display: none;
	}
</style>
</block>
<block name="body">
	<div class="mui-content">
		<section>
			<section>
				<div id="slider" class="mui-slider" >
					<div class="mui-slider-group mui-slider-loop">
						<div class="mui-slider-item">
							<a href="#">
								<img height="200" src="{$good.pic}">
							</a>
						</div>
						<volist name="good['imgset']" id="vo">
						<div class="mui-slider-item">
							<a href="javascript:void(0);">
								<img height="200" src="{$vo.name}">
							</a>
						</div>
						</volist>
					</div>
				</div>
			</section>
			<div class="dis_flex xq_bar">
				<div class="flex1">
					<a href="/Wap/shop/index?store_id={$good.st_id}">
						<i class="mui-icon-extra mui-icon-extra-hotel" style="color: #e6cb07;"></i>
						<span>进入店铺</span>
					</a>
				</div>
				<div class="flex1">
					<if condition="$collect.id neq null">
					<a href="javascript:collect_delete({$collect.id});">
						<i class="mui-icon-extra mui-icon-extra-heart-filled"></i>
						<span>收藏商品</span>
					</a>
					<else/>
					<a href="javascript:collect_add({$good.id},'sp');">
						<i class="mui-icon-extra mui-icon-extra-heart"></i>
						<span>收藏商品</span>
					</a>
					</if>
				</div>
			</div>
			<div class="xq_ms">
				<ul>
					<li><h4 class="mui-ellipsis-2">{$good.productname}</h4></li>
					<li class="dis_flex">
						<p class="flex1 mui-text-left color_red xq_jg">
							<span class="show_price">
							<if condition="$good.price gt 0">￥{$good.price}</if>
							<if condition="$good.point_num gt 0">
								<if condition="$good.price gt 0">+</if>
								积分：{$good.point_num}
							</if>
							<if condition="$good.coin_num gt 0">积分：{$good.coin_num}</if>
							</span>
							<br />
							<small class="show_stock" style="font-size:0.1rem">
							</small>
						</p>
						<p class="flex1 mui-text-right">广州</p>
					</li>
					<li class="xq_sele">
						<p>颜色类型</p>
						<p class="color">
							<volist name="good.goods_color" id="vcolor">
							<a class="color_{$vcolor.id}" href="javascript:onColor({$vcolor.id});">{$vcolor.name}</a>
							</volist>
						</p>
					</li>
					<li class="xq_sele">
						<p>码数</p>
						<p class="spec">
							<!-- 
							<voli name="good.goods_spec" id="vspec">
							<a class="spec_$vspec.id" href="javascript:onSpec($vspec.id);">$vspec.name</a>
							</voli>
							 -->
						</p>
					</li>
				</ul>
			</div>
		</section>
		<section>
			{$good.content|html_entity_decode}
		</section>
		<footer class="xq_footer">
			<div class="dis_flex">
				<a class="lxkf" href="/Wap/Shop/cart">
					<p><i class="mui-icon-extra mui-icon-extra-cart"></i></p>
					<p>购物车</p>
				</a>
				<a class="dp" href="/Wap/shop/index?store_id={$good.st_id}">
					<p><i class="mui-icon-extra mui-icon-extra-hotel"></i></p>
					<p>店铺</p>
				</a>
				<a class="shouye" href="/Wap/index/index">
					<p><i class="mui-icon mui-icon-home"></i></p>
					<p>首页</p>
				</a>
				<a class="flex1 jrgwc" href="javascript:add_cart({$good.id});">加入购物车</a>
				<a class="flex1 lkgm" href="javascript:firm_order({$good.id});">立即购买</a>
			</div>
		</footer>
	</div>
</block>
<block name="script">
	<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
	<script>
		mui.init({
			swipeBack:true //启用右滑关闭功能
		});
		mui("#slider").slider({
			interval: 5000
		});

		function collect_delete(id) {
			mui.post('/Wap/Index/delete_collect', {
					id: id
				}, function(data) {
					if(data.code === 0) {
						location.reload();
					} else if(data.code === 2) {
						location.href="/Wap/Member/login";
					} else {
						alert(data.message);
					}
				}, 'json');
		}

		var goods_color = {:json_encode($good['goods_color'])};
		var goods_spec = {:json_encode($good['goods_spec'])};
		var goods_spec_arr = {:json_encode($good['goods_spec_arr'])};
		var r_cid = 0;
		var r_sid = 0;

		function collect_add(sc_id, sc_lx) {
			mui.post('/Wap/Index/add_collect', {
					sc_id: sc_id,
					sc_lx: sc_lx
				}, function(data) {
					if(data.code === 0) {
						location.reload();
					} else if(data.code === 2) {
						location.href="/Wap/Member/login";
					} else {
						alert(data.message);
					}
				}, 'json');
		}

		function add_cart(goods_id) {
			if(typeof(goods_color[r_cid]) == 'undefined') {
				alert('请选择颜色');
				return false;
			}
			if(typeof(goods_spec[r_sid]) == 'undefined') {
				alert('请选择码数');
				return false;
			}
			var price = goods_spec_arr[r_cid + '|' + r_sid].price > 0?goods_spec_arr[r_cid + '|' + r_sid].price:0;
			var point_num = goods_spec_arr[r_cid + '|' + r_sid].point_num > 0?goods_spec_arr[r_cid + '|' + r_sid].point_num:0;
			mui.post('/Wap/Shop/add_cart', {
				goods_id: goods_id,
				color_n: goods_color[r_cid].name,
				spec_n: goods_spec[r_sid].name,
				price: price,
				point_num: point_num
			}, function(data) {
				if(data.code === 0) {
					alert(data.message);
				} else if(data.code === 2) {
					location.href="/Wap/Member/login";
				} else {
					alert(data.message);
				}
			}, 'json');
		}
		function firm_order(goods_id) {
			if(typeof(goods_color[r_cid]) == 'undefined') {
				alert('请选择颜色');
				return false;
			}
			if(typeof(goods_spec[r_sid]) == 'undefined') {
				alert('请选择码数');
				return false;
			}
			var price = goods_spec_arr[r_cid + '|' + r_sid].price > 0?goods_spec_arr[r_cid + '|' + r_sid].price:0;
			var point_num = goods_spec_arr[r_cid + '|' + r_sid].point_num > 0?goods_spec_arr[r_cid + '|' + r_sid].point_num:0;
			location.href = "/Wap/Order/firm_order?id=" + goods_id + "&color_n=" + goods_color[r_cid].name + "&spec_n=" + goods_spec[r_sid].name + "&price=" + price +  "&point_num=" + point_num;
		}

		function onColor(cid) {
			r_cid = cid;
			r_sid = 'undefined';
			var color = $('.color_' + cid);
			color.siblings().removeClass('active');
			color.addClass('active');
			var html = '';
			for(var spec in goods_spec) {
				html += '<a class="spec_' + spec + '" href="javascript:onSpec(' + cid + ',' + spec + ');">' + goods_spec[spec].name + '</a>';
			}
			$('.spec').html(html);
		}
		
		function onSpec(cid, sid) {
			r_sid = sid;
			var spec = $('.spec_' + sid);
			spec.siblings().removeClass('active');
			spec.addClass('active');
			onSpecArr(cid, sid);
		}
		var showPrice = $('.show_price');
		var showStock = $('.show_stock');
		function onSpecArr(cid, sid) {
			var arr = goods_spec_arr[cid+'|'+sid];
			var text = '';
			if(arr.price > 0) {
				text += '￥' + arr.price;
			}
			if(arr.point_num > 0) {
				if(arr.price > 0) { text += '+' }
				text += '积分：' + arr.point_num;
			}
			showPrice.text(text);
			showStock.text('(库存:' + arr.stock + ')')
		}
	</script>
</block>